<template>
  <el-form-item label="规格选项" v-loading="bodyLoading">
    <el-card shadow="never" class="w-full mb-3" v-for="(item, index) in skuCardList" :key="item.id"
      v-loading="item.loading">
      <template #header>
        <div class="flex items-center">
          <el-input v-model="item.text" placeholder="规格名称" style="width:200px;" @change="handleUpdate(item)">
            <template #append>
              <el-icon>
                <more class="cursor-pointer" @click="handleChooseSku(item)"></more>
              </el-icon>
            </template>
          </el-input>

          <el-button size="small" class="ml-auto" @click="sortCard('up', index)" :disabled="index == 0">
            <el-icon>
              <Top />
            </el-icon>
          </el-button>

          <el-button size="small" @click="sortCard('down', index)" :disabled="index === (skuCardList.length - 1)">
            <el-icon>
              <Bottom />
            </el-icon>
          </el-button>

          <el-popconfirm title="是否要删除该选项？" confirmButtonText="确认" cancelButtonText="取消" @confirm="handleDelete(item)">
            <template #reference>
              <el-button size="small">
                <el-icon>
                  <Delete />
                </el-icon>
              </el-button>
            </template>
          </el-popconfirm>

        </div>
      </template>
      <SkuCardItem :skuCardId="item.id"></SkuCardItem>
    </el-card>
    <el-button type="success" size="small" :loading="btnLoading" @click="addSkuCardEvent">添加规格</el-button>

  </el-form-item>

  <ChooseSku ref="ChooseSkuRef"></ChooseSku>

</template>
<script setup>
import { ref } from "vue"
import SkuCardItem from './SkuCardItem.vue';
import ChooseSku from '~/components/ChooseSku.vue';
import { skuCardList, btnLoading, addSkuCardEvent, handleUpdate, handleDelete, sortCard, bodyLoading, handleChooseSetGoodsSkusCard } from "~/composables/useSku.js"

// 动态绑定组件节点
const ChooseSkuRef = ref(null)
const handleChooseSku = (item) => {
  ChooseSkuRef.value.open((value) => {
    handleChooseSetGoodsSkusCard(item.id, {
      name: value.name,
      value: value.list
    })
  })
}
</script>

<style scoped>
.el-card_header {
  @apply !p-2 bg-gray-50;
}
</style>